import 'wdyr'
import React from "react";
import styled from "@emotion/styled";
import { Typography } from "antd";
import { SearchPanel } from "./search-panel";
import { List } from "./list";
import { useDebounce, useDocumentTitle } from "utils";
import { useProject } from "utils/project";
import { useUsers } from "utils/user";
import { useProjectsSearchParam } from "./util";
import { ButtonNoPadding, Row } from "components/lib";
import { projectListActions } from "./project-list.slice";
import { useDispatch } from "react-redux";

// useEffect 基本类型，可以放在依赖里； 组件状态，可以放在依赖里； 非组件状态的对象，绝不可以放在依赖里
export const ProjectListScreen = () => {
  const dispatch = useDispatch()

  useDocumentTitle("项目列表", false);

  const [param, setParam] = useProjectsSearchParam()

  const { isLoading, error, data: list, retry } = useProject(useDebounce(param, 200));

  const { data: users } = useUsers();

  return (
    <Container>
      <Row between={true}>
        <h1>项目列表</h1>
        <ButtonNoPadding
          type={"link"}
          onClick={() => dispatch(projectListActions.openProjectModal())}
        >
          创建项目
        </ButtonNoPadding>
      </Row>
      <SearchPanel param={param} setParam={setParam} users={users || []}/>
      {error ? <Typography.Text type={"danger"}>{error.message}</Typography.Text> : null}
      <List
        refresh={retry}
        loading={isLoading}
        dataSource={list || []}
        users={users || []}
      />
    </Container>
  );
};

ProjectListScreen.whyDIidYouRender = true

const Container = styled.div`
padding: 3.22rem;
`;
